¡Hola 👋! Espera mientras comienza la sesión.
Antes que todo, ¿cómo están?
Visualización de Información
IIC2026 2021-2
Visualización de árboles y jerarquías
Visualización de Información
IIC2026 2021-2
Contenidos
1. Jerarquía y árboles
2. Contención
3. Jerarquía en D3.js
4. Idioms jerárquicos en D3.js
¡Muchas opciones con jerarquías!
(Fuente: Libro "Visualization, Analysis and Design" )
¡Actividad grupal!
Cada grupo asignado a una Sala de Zoom debe completar en conjunto un programa de JavaScript que extiende un documento HTML. Los objetivos a lograr como grupo son:
- Escribir una lista no ordenada en el documento HTML con los nombres de las personas que forman el grupo.
- El objetivo principal es cambiar la orientación de la jerarquía a radial. Para calcular las coordenadas de elementos, se puede lograr alterando el mismo generador tree del código base, utilizando matemáticas geométricas y trigonometría, y aplicando transformaciones. Para las líneas, utilicen linkRadial.
- Luego, pueden codificar un atributo “valor” de los nodos hojas que se acumula en cada nodo padre hasta la raíz mediante un color de relleno de los nodos.
- Luego pueden personalizar como quieran.
¡Actividad grupal!
¡Actividad grupal!
Les recomendamos que por grupo asignen:
- Al menos una persona que tenga el material del curso y documentación de D3.js a mano para consultarla.
- Al menos una persona pendiente de las dudas que surjan para solicitar ayuda durante la actividad.
- Al menos una persona que se encargue de escribir y extender el documento HTML y programa JavaScript.
- El resto puede apoyar a quienes escriban o a otros roles.
¡Actividad grupal!
Para colaborar en el código, pueden:
- Colaborar en Coding Rooms
- Colaborar en JSFiddle
- Colaborar en Liveweave
- Encargar a una persona que comparta pantalla y escriba.
El equipo docente les preparó salas en Coding Rooms. Para ingresar y colaborar deben entrar a un enlace y luego:
- Por defecto, entrarán a la sala solo con permiso de lectura, por lo que un ayudante les asignará el rol de editor a les primeres que entren.
- Si ya tienen rol de editor, pueden darle este rol a otros estudiantes. Para ello:
- Presionen el botón ‘Share’ en la parte superior derecha.
- En el cuadro desplegado, cambia el rol de todes les ‘Viewer’ a ‘Editor’ (Si no salen en el cuadro desplegado, recarguen la página)
- Para poder ver cómo va quedando su código, despliguen la vista de navegador en el botón ‘View Webpage’ de la parte inferior derecha.
- ¡Listo! Ya pueden ponerse a trabajar conjuntamente en su HTML y SVG.
¡Actividad grupal!
Salas y documentos asignados:
- Sala 1: Documento en Coding Room
- Sala 2: Documento en Coding Room
- Sala 3: Documento en Coding Room
- Sala 4: Documento en Coding Room
- Sala 5: Documento en Coding Room
- Sala 6: Documento en Coding Room
Resultados de actividad grupal
¡Visualización del día!
Life in Los Angeles by Eugene Turner, 1977.
Propuesta por entidad anónima.
(Fuente: ICA Commisions of Map Design)
Próximos eventos:
Estamos en plazo de realización de Examen, el que termina este jueves 2 de diciembre.
El jueves 18 realizaremos de forma remota Repaso general pensando en el Examen.
¡Queda la última sesión de contenidos de material! Validación en visualización (martes 23).